<template>
  <div class="Data_Assets_MXGL">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-row>
            <el-col :span="5">
              <el-tree
                :data="data"
                node-key="ApplicationId"
                :props="defaultProps"
                @node-click="tree_click"
                v-loading="tree_loading"
                :highlight-current="true"
                class="tree_style"
              >
                <span class="custom-tree-node" slot-scope="{ data }">
                  <span v-if="data.ApplicationName">{{
                    data.ApplicationName
                  }}</span>
                  <span v-if="data.DbName">{{ data.DbName }}</span>
                  <span v-if="data.TableName">{{ data.TableName }}</span>
                </span>
              </el-tree>
            </el-col>
            <el-col :span="19">
              <div style="margin-top: 15px" v-if="false">
                <span style="margin-right: 10px">备注(表名字) </span>
                <el-input
                  size="mini"
                  style="display: inline-block; width: 40%"
                  placeholder="请输入备注(表名字)"
                ></el-input>
                <el-button
                  size="mini"
                  style="margin-left: 10px"
                  icon="el-icon-search"
                ></el-button>
              </div>
              <el-table
                :data="tableData"
                style="width: 100%; margin-top: 20px"
                height="500px"
                v-loading="tableData_loading"
              >
                <el-table-column prop="FieldName" label="英文名称">
                </el-table-column>
                <el-table-column prop="PKeyName" label="中文名称">
                </el-table-column>
                <el-table-column prop="DbType" label="类型"> </el-table-column>
                <el-table-column prop="TableName" label="备注">
                </el-table-column>
              </el-table>
              <div class="block" style="text-align: center; margin-top: 5px">
                <el-pagination
                  layout="prev, pager, next"
                  :page-size="pages.limit"
                  :total="pages.total"
                  :current-page.sync="pages.page"
                  @current-change="page_change"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "Child",
        label: "ApplicationName",
      },
      tree_loading: false, //树loading
      tableData_loading: false, // 表格loading
      tableData: [],
      Tbid: null, //临时存储id
      TableName: "", //临时存储表名
      pages: {
        page: 1,
        limit: 18,
        total: 1,
      },
    };
  },
  methods: {
    getTree_data() {
      this.tree_loading = true;
      this.$get("/DataManage/Mode/Tree")
        .then((res) => {
          if (res.code == 0) {
            this.data = res.data;
            this.tree_loading = false;
          }
        })
        .catch((err) => {
          this.tree_loading = false;
          console.log(err);
        });
    },
    tree_click(data) {
      if (data.Id) {
        this.Tbid = data.Id;
      }
      if (data.TableName) {
        this.pages.page = 1;
        this.TableName = data.TableName;
        this.getTableData(this.Tbid, this.TableName, this.pages.page);
      }
    },
    getTableData(id, TableName, page) {
      this.tableData_loading = true;
      this.$post(
        "/DataManage/Mode/List?id=" +
          id +
          "&tableName=" +
          TableName +
          "&page=" +
          page +
          "&limit=" +
          this.pages.limit
      )
        .then((res) => {
          if (res.code == 0) {
            console.log(res);
            this.pages.total = res.data.TotalCount;
            this.tableData = res.data.list;
            this.tableData_loading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.tableData_loading = false;
        });
    },
    page_change(val) {
      this.getTableData(this.Tbid, this.TableName, val);
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.getTree_data();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss">
.Data_Assets_MXGL {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .tree_style {
    height: 600px;
    overflow: auto;
  }
}
</style>
